<template>
	<view class="page">
		<view class="littleTitle">
			请选择院区
		</view>
		<view class="campuslists">
			<view class="campus" v-for="(item,index) in campuslists" :key="index" @click="jump(item.name)">
				<image style="width: 90rpx;" :src="item.image" mode="widthFix"></image>
				<view class="campusInfo">
					<view class="title">
						{{item.name}}
					</view>
					<view class="address">
						{{item.address}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

	const campuslists=reactive([
		{
			image:'https://cdn8.axureshop.com/demo/2208121/images/%E9%99%A2%E5%8C%BA%E5%88%97%E8%A1%A8/u602.png',
			name:'四川省保健院南苑',
			address:'四川省成都市锦江区画溪路666号'
		},
		{
			image:'https://cdn8.axureshop.com/demo/2208121/images/%E9%99%A2%E5%8C%BA%E5%88%97%E8%A1%A8/u602.png',
			name:'四川省保健院北苑',
			address:'四川省成都市锦江区画溪路666号'
		},
		{
			image:'https://cdn8.axureshop.com/demo/2208121/images/%E9%99%A2%E5%8C%BA%E5%88%97%E8%A1%A8/u602.png',
			name:'四川省保健院体检中心',
			address:'四川省成都市锦江区画溪路666号'
		}
	])
	
	// 选择院区
	const jump = (name) => {
		uni.setStorageSync('campus',name)
		uni.redirectTo({
			url:'/pages/Department_List/Department_List?name='+name
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		.littleTitle{
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #000;
		}
		.campuslists{
			margin-top: 30rpx;
			.campus{
				width: 100%;
				height: 142rpx;
				background-color: rgba(230, 244, 255, 1);
				border: 2rpx solid rgba(22, 119, 255, 1);
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding-left: 38rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				.campusInfo{
					margin-left: 28rpx;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					.title{
						font-size: 32rpx;
						color: #333;
						font-weight: 700;
					}
					.address{
						font-size: 24rpx;
						color: #7f7f7f;
						margin-top: 12rpx;
					}
				}
			}
		}
	}
</style>
